<!-- 见证pdf组件 -->
<template>
  <div class="witnessPdf">
    <div v-if="show" class="pdf-btns">
      <!-- 当附件id为空时，禁用按钮 -->
      <el-button type="primary" plain class="ui-pl10" :disabled="src == ''" @click="$refs.pdfPrint.print()">
        打印
      </el-button>
      <el-button type="primary" :disabled="downLoadSrc == ''" @click="pdfDownloadFn()">保存</el-button>
    </div>
    <div v-if="show" class="pdf-box" :style="'height:' + pdfBoxHeight">
      <!-- pdf展示区 -->
      <div v-for="i in pdfTotalPages" :key="i" class="pdf_num_div">
        <pdf :key="i" :src="src" :page="i" style="display: inline-block; width: 100%" />
        <!-- 暂时没有显示页码的需求 -->
        <!-- <span class="pageNume">{{i}}/{{pdfTotalPages}}</span> -->
      </div>
      <!-- 生成一个不可见的pdf,主要用于打印 -->
      <pdf ref="pdfPrint" style="display: none" :src="src" />
    </div>
  </div>
</template>
<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  // attachDownload
  import { attachmentList } from "../api/api";
  import pdf from "vue-pdf-cs";
  import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
  export default {
    // 引入组件
    components: { pdf },
    props: {
      // 显示pdf信息
      show: {
        type: Boolean,
        default: false
      },
      // 获取附件相关信息的参数
      pdfParams: {
        type: Object,
        default: () => ({
          belongId: "", // 附件归属主键id——必传参数
          attachTypeCode: "" // 附件编码——必传参数
        })
      },
      // pdf盒子高度
      pdfBoxHeight: {
        type: String,
        default: "100%"
      }
    },
    data() {
      // 这里存放数据
      return {
        src: "", // 附件预览和打印链接
        pdfTotalPages: 0, // pdf总页码
        downLoadSrc: "" // 下载的url
      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {
      show: {
        immediate: true, // true首次加载执行，否则不执行为false或不添加此属性
        handler: function (val, oldVal) {
          if (val) {
            this.attachmentListFn();
          }
        }
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 生命周期 - 销毁之前
    beforeDestroy() {},
    // 生命周期 - 销毁完成
    destroyed() {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
    // 方法集合
    methods: {
      // 获取附件信息
      async attachmentListFn() {
        try {
          this.src = "";
          this.pdfTotalPages = 0;
          this.downLoadSrc = "";
          const res = await attachmentList(this.pdfParams);
          if (res.success) {
            // 生成预览和打印链接
            this.src = pdf.createLoadingTask({
              url: `${process.env.VUE_APP_API}/platform/attach/download?attachId=${res.data[0].attachId}`,
              CMapReaderFactory
            });
            this.src.then((item) => {
              this.pdfTotalPages = item.numPages;
            });
            // 生成下载链接
            this.downLoadSrc = `${process.env.VUE_APP_API}/platform/attach/download?attachId=${res.data[0].attachId}`;
          } else {
            this.$message({
              type: "error",
              message: res.message ? res.message : "pdf文件暂未获取，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          this.$message({
            type: "error",
            message: "pdf文件暂未获取，请稍后再试",
            single: true
          });
        }
      },
      // 下载
      pdfDownloadFn() {
        window.location.href = this.downLoadSrc;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .witnessPdf {
    width: 100%;
    height: 100%;
    margin-top: 50px;
    .pdf-btns {
      position: absolute;
      right: 0px;
      bottom: 0px;
      background: #fff;
      width: 100%;
      text-align: right;
      padding: 10px;
    }
    .pdf-box {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      // padding: 30px;
      // padding-bottom: 0;
      background: #eee;
      border-radius: 0px 0px 2px 2px;
      overflow: auto;
      .pdf_num_div {
        // margin-bottom: 10px;
        position: relative;
        overflow: hidden;
        .pageNume {
          font-size: 12px;
          color: #666;
          position: absolute;
          bottom: 10px;
          left: calc(50% - 10px);
        }
      }
    }
  }
</style>
